<template>
  <!-- 基本信息 -->
  <div>
    <el-form
      label-width="auto"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item
            v-if="$route.query.status !== '查看'"
            label="填报单位："
            prop="reportInOrgName"
          >
            <el-select
              :disabled="$route.query.submit === '已提交'"
              v-model="ruleForm.reportInOrgName"
              placeholder="请选择填报单位"
              @change="changeReportInOrgId"
            >
              <el-option
                v-for="item in reportOptions"
                :key="item.orgId"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else label="填报单位：">
            <span>{{ ruleForm.reportInOrgName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item
            label="供应商："
            v-if="$route.query.status !== '查看'"
            prop="supplier"
          >
            <el-input disabled v-model="ruleForm.supplier"></el-input>
          </el-form-item>
          <el-form-item v-else label="供应商：">
            <span>{{ ruleForm.supplier }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item
            prop="bowOutNumber"
            v-if="$route.query.status !== '查看'"
            label="退货单编号："
          >
            <el-input disabled v-model="ruleForm.bowOutNumber"></el-input>
          </el-form-item>

          <el-form-item v-else label="退货单编号：">
            <span>{{ ruleForm.bowOutNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item
            prop="bowOutName"
            v-if="$route.query.status !== '查看'"
            label="退货单名称："
          >
            <el-input
              :disabled="$route.query.status === '查看'"
              v-model="ruleForm.bowOutName"
              maxlength="300"
              show-word-limit
              @blur="handleTrim('bowOutName')"
            ></el-input>
          </el-form-item>
          <el-form-item v-else label="退货单名称：">
            <span :title="ruleForm.bowOutName" class="overflow">{{
              ruleForm.bowOutName
            }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12" class="relative">
          <el-form-item
            label="验收单编号："
            v-if="$route.query.status !== '查看'"
          >
            <el-input disabled v-model="ruleForm.acceptanceNumber"></el-input>
            <el-button
              type="single-number"
              v-if="$route.query.status !== '查看'"
              class="chereay"
              @click="handleCheckYS"
              :disabled="$route.query.submit === '已提交'"
              >选择</el-button
            >
          </el-form-item>
          <el-form-item v-else label="验收单编号：">
            <span>{{ ruleForm.acceptanceNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item
            label="合同编号："
            v-if="$route.query.status !== '查看'"
            prop="contractNumber"
          >
            <el-input
              :disabled="$route.query.status === '查看'"
              v-model="ruleForm.contractNumber"
              maxlength="300"
              show-word-limit
              @blur="handleTrim('contractNumber')"
            ></el-input>
          </el-form-item>

          <el-form-item v-else label="合同编号：">
            <span>{{ ruleForm.contractNumber }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item
            v-if="$route.query.status !== '查看'"
            label="验收人："
            prop="acceptor"
          >
            <el-input disabled v-model="ruleForm.acceptor"></el-input>
          </el-form-item>
          <el-form-item v-else label="验收人：">
            <span>{{ ruleForm.acceptor }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12" :offset="4">
          <el-form-item
            v-if="$route.query.status !== '查看'"
            label="验收人联系电话："
            prop="bowOutPhone"
          >
            <el-input disabled v-model="ruleForm.acceptancePhone"></el-input>
          </el-form-item>
          <el-form-item v-else label="验收人联系电话：">
            <span>{{ ruleForm.acceptancePhone }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item label="退货人：" prop="bowOutPeople">
            <el-input
              v-model="ruleForm.bowOutPeople"
              maxlength="50"
              show-word-limit
              v-if="$route.query.status !== '查看'"
              @blur="handleTrim('bowOutPeople')"
            ></el-input>
            <span v-else>{{ ruleForm.bowOutPeople }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="退货人联系电话：" prop="bowOutPhone">
            <el-input
              v-model="ruleForm.bowOutPhone"
              maxlength="11"
              show-word-limit
              v-if="$route.query.status !== '查看'"
            ></el-input>
            <span v-else>{{ ruleForm.bowOutPhone }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item label="供应商联系电话：" prop="supplierPhone">
            <el-input
              disabled
              v-model="ruleForm.supplierPhone"
              v-if="$route.query.status !== '查看'"
            ></el-input>
            <span v-else>{{ ruleForm.supplierPhone }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="退货日期：" prop="bowOutDate">
            <el-date-picker
              v-if="$route.query.status !== '查看'"
              type="date"
              placeholder="请选择"
              v-model="ruleForm.bowOutDate"
              style="width: 100%"
            ></el-date-picker>
            <span v-else>{{
              ruleForm.bowOutDate ? ruleForm.bowOutDate.split(" ")[0] : ""
            }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item label="合同名称：" prop="contractName">
            <el-input
              disabled
              v-model="ruleForm.contractName"
              v-if="$route.query.status !== '查看'"
            ></el-input>
            <span v-else :title="ruleForm.contractName" class="overflow">{{
              ruleForm.contractName
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="编制日期：" prop="compileDate">
            <el-date-picker
              disabled
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.compileDate"
              style="width: 100%"
              v-if="$route.query.status !== '查看'"
            ></el-date-picker>
            <span v-else>{{ formatDate(ruleForm.compileDate) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="0">
        <el-col :span="10">
          <el-form-item label="编制人：" prop="compilePeople">
            <el-input
              disabled
              v-model="ruleForm.compilePeople"
              v-if="$route.query.status !== '查看'"
            ></el-input>
            <span v-else>{{ ruleForm.compilePeople }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="0">
        <el-col :span="10">
          <el-form-item label="退货原因：" prop="bowOutType">
            <el-select
              style="width: 100%"
              v-if="$route.query.status !== '查看'"
              v-model="ruleForm.bowOutType"
              placeholder="请选择"
              @change="getSelect"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span v-else>{{ ruleForm.bowOutType }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="退货备注：" prop="bowOutReason">
        <el-input
          type="textarea"
          v-model="ruleForm.bowOutReason"
          maxlength="1000"
          show-word-limit
          v-if="$route.query.status !== '查看'"
          @blur="handleTrim('bowOutReason')"
        ></el-input>
        <span v-else>{{ ruleForm.bowOutReason }}</span>
      </el-form-item>
    </el-form>

    <!-- 验收单编号选择弹框 -->
    <chooseSupplier
      ref="brachFormVisible"
      @partyBName="partyBName"
      :reportInOrgId="ruleForm.reportInOrgId"
    />
  </div>
</template>

<script>
import chooseSupplier from "../components/chooseSupplier";
import { addUrlPerFix, formatNumber } from "@/basa/utils";
import { getAcceptanceCert } from "../api/index";

import { getUserInfo, getReportInOrgData } from "@/basa/api";
export default {
  props: {
    fromData: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  watch: {
    fromData: {
      handler(n) {
        if (Object.values(n).length > 0) {
          this.ruleForm = n;
        }
      },
      immediate: true
    }
  },
  data() {
    const Mobile = (rule, value, callback) => {
      var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (value) {
        if (value.match(myreg)) {
          callback();
        } else {
          this.$showErrorMessage("请输入正确的手机号");
          callback(new Error(rule.message || "请输入正确的手机号"));
        }
      } else {
        callback();
      }
    };
    const tbdw = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("填报单位不能为空"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {},
      options: [
        {
          value: "质量问题",
          label: "质量问题"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      rules: {
        // 验收人
        acceptor: [
          { required: true, message: "验收人不能为空", trigger: "change" }
        ],
        // 合同名称
        contractName: [
          { required: true, message: "合同名称不能为空", trigger: "change" }
        ],
        // 退货单名称
        bowOutName: [
          { required: true, message: "退货单名称不能为空", trigger: "change" }
        ],
        // 退货人
        bowOutPeople: [
          { required: true, message: "退货人不能为空", trigger: "change" }
        ],
        // 退货原因
        bowOutType: [
          { required: true, message: "退货原因不能为空", trigger: "change" }
        ],
        // 退货备注
        bowOutReason: [
          { required: true, message: "退货备注不能为空", trigger: "change" }
        ],
        // 编制人
        compilePeople: [
          { required: true, message: "编制人不能为空", trigger: "change" }
        ],
        // 编制日期
        compileDate: [
          { required: true, message: "编制日期不能为空", trigger: "change" }
        ],
        // // 供应商
        // supplier: [
        //   { required: true, message: "填报单位不能为空", trigger: "change" }
        // ],
        // 填报单位
        reportInOrgName: [
          { required: true, trigger: "change", validator: tbdw }
        ],
        // 验收单编号表单验证
        acceptanceNumber: [
          { required: true, message: "验收单编号不能为空", trigger: "change" }
        ],
        // 验收单名称
        acceptanceName: [
          { required: true, message: "验收单名称不能为空", trigger: "change" }
        ],
        // 合同编号
        contractNumber: [
          { required: true, message: "合同编号不能为空", trigger: "change" }
        ],
        // 物流评价星级不能为空
        logisticsEvaluationStar: [
          { required: true, message: "物流评价星级不能为空", trigger: "change" }
        ],
        logisticsCoordinationStar: [
          {
            required: true,
            message: "物流现场配合度星级不能为空",
            trigger: "change"
          }
        ],
        // 退货人手机号
        bowOutPhone: [
          {
            validator: Mobile,
            trigger: "blur"
          }
        ],
        // 供应商联系电话
        supplierPhone: [
          {
            validator: Mobile,
            trigger: "change"
          }
        ],
        // 验收人联系电话
        acceptancePhone: [
          {
            required: true,
            message: "验收人联系电话不能为空",
            trigger: "change"
          },
          {
            required: true,
            validator: Mobile,
            trigger: "change"
          }
        ]
      },
      reportOptions: [], // 填报单位
      reportInOrgObj: {
        title: "填报单位查询",
        tableData: [],
        recordsTotal: 0,
        formDate: {
          mainType: "A",
          orgid: "",
          pageNo: 1,
          pageSize: 10
        }
      }
    };
  },
  components: { chooseSupplier },
  activated() {
    this.getUserInfo();
  },
  deactivated() {
    this.$refs["ruleForm"].resetFields();
  },
  methods: {
    // 获取用户信息(填报单位下拉组件)
    getUserInfo() {
      getUserInfo(
        addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",
        {}
      ).then(res => {
        this.ruleForm.reportUsername = res.data.data.userInfo.name;
        this.ruleForm.reportOpenid = res.data.data.userInfo.id; //编制人id
        this.getReportInOrgData(res.data.data.userInfo.openId);
      });
    },
    // 填报信息(填报单位下拉组件)
    getReportInOrgData(openId) {
      getReportInOrgData({ openIds: [openId] }).then(res => {
        this.reportInOrgObj.tableData = res.data.data[openId];
        this.reportInOrgObj.recordsTotal = res.data.data[openId].length;
        this.reportOptions = res.data.data[openId];
        this.ruleForm.reportInOrgName =
          this.ruleForm.reportInOrgName || this.reportOptions[0].name;
        this.ruleForm.reportInOrgId =
          this.ruleForm.reportInOrgId || this.reportOptions[0].orgId;
      });
    },
    // 多选框的值
    getSelect(value) {
      if (value == "质量问题") {
        this.ruleForm.bowOutTypeCode = 1;
      } else if (value == "其他") {
        this.ruleForm.bowOutTypeCode = 2;
      }
    },
    // 获取baseinfo回显
    partyBName(from) {
      //验收单主键
      from.acceptanceId = from.id;

      // 日期
      from.compileDate = new Date(
        from.compileDate.replace(/-/g, "/")
      ).getTime();
      this.ruleForm = { ...from, ...this.ruleForm };

      getAcceptanceCert({ id: from.id }).then(res => {
        let arr = res.data.data.acceptanceBillBOList;

        arr.forEach(e => {
          e.acceptanceBillId = e.id;
          e.acceptanceEndNumber = e.currentAcceptanceEndNumber;
          this.$set(e, "bowOutNumber", 0);
          this.$set(
            e,
            "testdaohuo",
            e.areaName +
              e.provinceName +
              e.cityName +
              e.countyName +
              e.acceptancePlace
          );

          e.acceptanceCurrentNumber = formatNumber(
            e.acceptanceCurrentNumber,
            3
          );
          e.acceptanceCurrentEndNumber = formatNumber(
            e.acceptanceCurrentEndNumber,
            3
          );
          e.bowOutNumber = formatNumber(e.bowOutNumber, 3);
          this.ruleForm.categoryName = e.categoryName;
        });

        this.$emit("outInventoryList", arr);

        this.dialogVisible = false;
      });
    },
    // 选择验收单
    handleCheckYS() {
      if (this.ruleForm.reportInOrgId) {
        this.$refs.brachFormVisible.dialogTableVisibletextarea = true;
        this.$refs.brachFormVisible.listConSupPage();
        this.$emit('handleCheckYS')
      } else {
        this.$showErrorMessage("请选择填报单位");
      }
    },

    // 填报单位组件change
    changeReportInOrgId(val) {
      this.ruleForm = {id:this.fromData.id,version:this.fromData.version};
      const tempObj = this.reportOptions.find(e => e.name === val);
      this.ruleForm.reportInOrgId = tempObj.orgId;
      this.ruleForm.reportInOrgName = tempObj.name;
      this.ruleForm.bowOutNumber = this.fromData.bowOutNumber;
      this.$forceUpdate();
      this.$emit("tbdwChange");
    },
    // 日期格式转换
    formatDate(date) {
      // date = new Date();
      date = new Date(date); //转换成Data();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.ruleForm,
        key,
        this.ruleForm[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    // 表单验证定位
    positionFrom() {
      return new Promise((resolve, reject) => {
        this.$refs["ruleForm"].validate(valid => {
          if (valid) {
            resolve("成功");
          } else {
            reject({ tabLabel: "基本信息", isFocus: "first" });
            return false;
          }
        });
      });
    }
  }
};
</script>

<style lang="scss">
.demo-ruleForm {
  width: 80%;
  margin: 20px 0 0 50px;
}

.relative {
  position: relative;
  .chereay {
    margin-left: 10px;
    position: absolute;
    top: 0;
    right: -80px;
  }
}
.demo-ruleForm .el-select {
  width: 100%;
}

.overflow {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
